<template>
   <!-- 加载图标样式25 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   animation: rotation 2s linear infinite;
   border-color: #1678ff;
   border-radius: 50%;
   border-style: solid solid dotted dotted;
   border-width: 3px;
   display: inline-block;
   height: 64px;
   position: relative;
   width: 64px
}

.loading:after {
   animation: rotationBack 1s linear infinite;
   border: 3px #1678ff;
   border-radius: 50%;
   border-style: solid solid dotted;
   bottom: 0;
   content: "";
   height: 36px;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 0;
   transform-origin: center center;
   width: 36px
}

@keyframes rotation {
   0% {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(1turn)
   }
}

@keyframes rotationBack {
   0% {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(-1turn)
   }
}
</style>
